<template>
	<view class="page">
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"
			color="#fff" title="注册"></uni-nav-bar>
		<view class="background"></view>
		<!-- 表单部分 -->
		<view class="form-card" style="top: -170rpx;">
			<form @submit="onSubmit">
				<view class="form-item">
					<label class="form-label">负责人：</label>
					<input class="form-input" v-model="formData.director" placeholder="输入负责人名字"
						placeholder-style="color:#DADADA; font-size: 24rpx;">
				</view>
				<view class="form-item">
					<label class="form-label">身份证号码：</label>
					<input class="form-input" v-model="formData.idCard" placeholder="输入负责人身份证号码"
						placeholder-style="color:#DADADA; font-size: 24rpx;">
				</view>
				<view class="form-item">
					<label class="form-label">手机号：</label>
					<input class="form-input" v-model="formData.mobile" placeholder="输入手机号"
						placeholder-style="color:#DADADA; font-size: 24rpx;">
				</view>
				<view class="form-item verification-code-item">
					<label class="form-label">验证码：</label>
					<input class="form-input verification-code-input" v-model="formData.code" placeholder="输入验证码"
						placeholder-style="color:#DADADA; font-size: 24rpx;">
					<span class="get-verification-code" @click="getVerificationCode">获取验证码</span>
				</view>
				<view class="form-item">
					<label class="form-label">店名：</label>
					<input class="form-input" v-model="formData.name" placeholder="输入店名"
						placeholder-style="color:#DADADA; font-size: 24rpx;">
				</view>
				<view class="form-item">
					<label class="form-label">工商营业执照号码：</label>
					<input class="form-input" v-model="formData.businessLicenseId" placeholder="输入营业执照号码"
						placeholder-style="color:#DADADA; font-size: 24rpx;">
				</view>
				<view class="form-item">
					<label class="form-label">经营区域：</label>
					<!-- 使用 picker 组件实现省市区选择 -->
					<picker mode="region" :value="operatingArea" @change="onRegionChange">
					        <view class="form-input" :placeholder="operatingArea.length > 0? operatingArea.join(' ') : '选择省市区'"
					            placeholder-style="color:#DADADA; font-size: 26rpx;">
					            <text v-if="operatingArea.length === 0" style="color:#DADADA; font-size: 26rpx;">选择省市区</text>
					            <text v-else style="font-size: 24rpx;">{{ operatingArea.join(' ') }}</text>
					        </view>
					    </picker>
				</view>
				<view class="form-item">
					<label class="form-label">地址：</label>
					<input class="form-input" v-model="formData.address" placeholder="输入详细地址"
						placeholder-style="color:#DADADA; font-size: 24rpx;">
				</view>
			</form>
		</view>
		<!-- 商家简介部分 -->
		<view class="info-card">
			<view class="card-title">商家简介</view>
			<form @submit="onSubmit">
				<textarea class="info-textarea" v-model="formData.description" placeholder="请准确的介绍一下公司的情况"
					placeholder-style="font-size: 24rpx;"></textarea>
			</form>
		</view>
		<!-- 身份证正反面照片部分 -->
		<view class="upload-card">
			<view class="card-title">身份证正反面照片</view>
			<form @submit="onSubmit">
				<view class="upload-container">
					<uni-file-picker v-model="frontValue"  limit="1" :image-styles="imageStyles" class="upload-picker"
						 @select="upFront">
						<view class="upload-content">
							<image src="/static/注册加号@2x.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
							<view class="upload-text">上传人像面</view>
						</view>
					</uni-file-picker>
					<uni-file-picker v-model="oppositeValue"  limit="1" :image-styles="imageStyles" class="upload-picker"
						 @select="upOpposite">
						<view class="upload-content">
							<image src="/static/注册加号@2x.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
							<view class="upload-text">上传国徽面</view>
						</view>
					</uni-file-picker>
				</view>
			</form>
		</view>
		<!-- 营业执照部分 -->
		<view class="upload-card">
			<view class="card-title">营业执照</view>
			<form @submit="onSubmit">
				<view class="upload-container">
					<uni-file-picker v-model="businessLicenseImgValue" limit="1" :image-styles="imageStyles" class="upload-picker"
						 @select="upBusinessLicenseImg">
						<view class="upload-content">
							<image src="/static/注册加号@2x.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
							<view class="upload-text">上传营业执照</view>
						</view>
					</uni-file-picker>
				</view>
			</form>
		</view>
		<!-- 门店照片部分 -->
		<view class="upload-card">
			<view class="card-title">门店照片</view>
			<form @submit="onSubmit">
				<view class="upload-container">
					<uni-file-picker v-model="photoValue" fileMediatype="image" mode="grid" @select="upPhoto"
						@progress="progress" @success="success" @fail="fail" limit="1" :image-styles="imageStyles"
						:auto-upload="false" class="upload-picker" >
						<view class="upload-content">
							<image src="/static/注册加号@2x.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
							<view class="upload-text">上传门店照片</view>
						</view>
					</uni-file-picker>
				</view>
			</form>
		</view>
		<button @click="onSubmit" class="modify-button">注册</button>
	</view>
</template>

<script>
	import {uploadFile} from "@/api/utils/file.js"
	
	import {register} from "@/api/shop/login.js"
	import {getIP} from "@/api/map/map.js"
	export default {
		data() {
			return {
				imageStyles: {
					height: '200rpx',
					width: '200rpx'
				},
				operatingArea:[],
				formData: {
					director: '', // 负责人
					idCard: '', // 身份证号码
					mobile: '', // 手机号
					code: '', // 验证码
					name: '', // 店名
					operatingArea: '', //经营区域
					address: '', // 地址
					businessLicenseId: '', // 工商营业执照号码
					description: '', // 商家简介
					front: '', // 身份证人像面照片
					opposite: '', // 身份证国徽面照片
					businessLicenseImg: '', // 营业执照照片
					photo: '' ,// 门店照片,
					latitude:'',
					longitude:''
				},
				// 存储选择的省市区
				regionValue: [],
				// 图片回显
				frontValue:[],
				oppositeValue:[],
				businessLicenseImgValue:[],
				photoValue: [],
				// 上传图片的样式
				imageStyles: {
					width: 90,
					height: 90,
				},
			};
		},
		methods: {
			// 文件上传
			
			// select(e) {

			// 	const tempFilePaths = e.tempFiles[0].file;
			// 	console.log("获取图片源", tempFilePaths);
			// 	uni.uploadFile({
			// 		url: 'http://localhost:8080/file/upload', //上传图片的后端接口
			// 		filePath: tempFilePaths,
			// 		name: 'file',
			// 		success: res => {
			// 			console.log("文件上传", res);
			// 			this.formData.avatar = res.data
			// 			console.log(this.formData.avatar, "头像")
			// 		}
			// 	});


			// 	console.log("触发文件上传");
			// },
			
			upFront(e){
				uploadFile(e.tempFiles[0].path)
				.then((res)=>{
					
					console.log("文件上传成功",res.data.url);
					this.formData.front=res.data.url
					
				}).catch((err)=>{
					console.log("文件上传失败",err);
				})
			},
			upOpposite(e){
				uploadFile(e.tempFiles[0].path)
				.then((res)=>{
					
					console.log("文件上传成功",res.data.url);
					this.formData.opposite=res.data.url
					
				}).catch((err)=>{
					console.log("文件上传失败",err);
				})
			},
			
			upBusinessLicenseImg(e){
				uploadFile(e.tempFiles[0].path)
				.then((res)=>{
					
					console.log("文件上传成功",res.data.url);
					this.formData.businessLicenseImg=res.data.url
					
				}).catch((err)=>{
					console.log("文件上传失败",err);
				})
			},
			
			upPhoto(e){
				uploadFile(e.tempFiles[0].path)
				.then((res)=>{
					
					console.log("文件上传成功",res.data.url);
					this.formData.photo=res.data.url
					
				}).catch((err)=>{
					console.log("文件上传失败",err);
				})
			},
			progress(e) {
				console.log('文件上传进度', e);
			},
			success(e) {

				console.log('文件上传到组件成功');
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			 onSubmit(e) {
				let _this=this;
				
				//提交 表单 
				
				console.log("表单数据", this.formData);
				console.log("表单数据", this.formData.director);
				
					// 逆地址解析
					getIP(this.formData.address).then((res)=>{
						console.log('解析结果',res.data.result.location.lat);
						this.formData.latitude=res.data.result.location.lat;
						this.formData.longitude=res.data.result.location.lng;
						
							console.log("表单数据", this.formData.latitude);// 34.746303
							console.log("表单数据", this.formData.longitude);// 113.625351
							
					return 	register(_this.formData);		
							
					})
					.then((res)=>{
						console.log('注册成功:', res.data);
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						});
					
						
						
					}).catch((err)=>{
						console.log('解析失败',err);
					})
					
				
				console.log('onSubmit 方法被调用');
				e.preventDefault(); // 阻止表单默认提交行为

				// 将选择的省市区添加到 formData 中
				
				return

				// 发送数据到后端
				uni.request({
					url: 'http://localhost:8080/business/register', // 替换为实际的后端接口地址
					method: 'POST',
					data: this.formData,
					success: (res) => {
						console.log('注册成功:', res.data);
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('注册失败:', err);
						uni.showToast({
							title: '注册失败',
							icon: 'none'
						});
					}
				});
			},
			getVerificationCode() {
				// 获取验证码逻辑
				
				
				
				
			},
			// 处理省市区选择改变事件
			onRegionChange(e) {
				this.operatingArea = e.detail.value;
				 this.formData.operatingArea = e.detail.value.join(''); 
				
				console.log("区域", this.operatingArea);//(3) ["北京市", "北京市", "东城区", __ob__: Observer]
			},
			onIdFrontChange(e) {
				this.formData.front = e.mp.detail.tempFilePaths[0];
			},
			onIdBackChange(e) {
				this.formData.opposite = e.mp.detail.tempFilePaths[0];
			},
			onBusinessLicenseChange(e) {
				this.formData.businessLicenseImg = e.mp.detail.tempFilePaths[0];
			},
			onStorePhotoChange(e) {
				this.formData.photo = e.mp.detail.tempFilePaths[0];

				console.log("照片按变化", this.formData.photo);
			}
		}
	};
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		min-height: 100vh;
		/* 确保父元素有足够高度 */
	}

	.background {
		position: relative;
		background-color: #3183FB;
		width: 100%;
		height: 200rpx;
	}

	.form-card {
		top: -130rpx;
		width: 90%;
		position: relative;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx;
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
	}

	.form-label {
		margin-top: 8rpx;
		font-size: 26rpx;
		font-weight: bold;
	}

	.form-input {
		border: 1rpx solid #DADADA;
		border-radius: 40rpx;
		padding: 0 20rpx;
		height: 60rpx;
		width: 300rpx;
	}

	.verification-code-item {
		position: relative;
	}

	.verification-code-input {
		width: 165rpx;
		padding-right: 160rpx;
		/* 为获取验证码按钮留出空间 */
	}

	.get-verification-code {
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #3183FB;
		font-size: 26rpx;
		font-weight: bold;
		border-left: 1rpx solid #DADADA;
		padding-left: 10rpx;
		cursor: pointer;
	}

	.info-card {
		margin: 20rpx;
		top: -130rpx;
		position: relative;
		width: 90%;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx;
	}

	.card-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.info-textarea {
		border: 1rpx solid #DADADA;
		height: 200rpx;
		border-radius: 20rpx;
		padding: 10rpx;
	}

	.upload-card {
		top: -130rpx;
		position: relative;
		width: 90%;
		margin: 20rpx;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx;
	}

	.upload-container {
		display: flex;

	}

	.upload-picker {
		margin-right: 20rpx;
	}

	.upload-content {
		text-align: center;
	}

	.upload-icon {
		color: #DADADA;
	}

	.upload-text {
		color: #DADADA;
	}

	.modify-button {
		margin: 20rpx 0;
		width: 300rpx;
		border-radius: 40rpx;
		color: white;
		background: linear-gradient(to right, #2E81FA, #0A64E7);
		/* 从左至右的蓝色渐变 */
	}
</style>